<!DOCTYPE html>
<html>
<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
	</head>
	<body>
  
<div id="app">
	<!--姓名<input type="text" v-model="massge"/>
	{{massge}}
	<input type="text" v-model="User.name"/>-->
	{{fullname}}
	<div>first.name:<input v-model="firstname"></div>
	<div>first.name:<input v-model="lastname"></div>
  </div>
  <script>
  var vm=new Vue({
  		el:'#app',
  		data:{
  			massge:'',
//			User:{
//				name:'muyuancd',
//			},

  firstname:'王',
  lastname:'峰',
  fullname:'王 峰'
  		},
  	  watch:{
 // 	   	massge:'way',//注意千万不要加括号不然不会报错还一直搞不出来气死人
//	   	'User':{
//	   		handler:function(nval,oval){
//	   		alert('监听之前的'+nval.name+'监听之后的'+oval.name)	
//	   		},
//	   		
//	   		deep:true
//	   	},
  firstname:function(val){
  	clearTimeout(this.firstTimeOut);
  	this.firstTimeOut=setTimeout(()=>{
  		
  		this.fullname=val+''+this.lastname;
  	},1000);
  },
 
lastname:function(val){
  	clearTimeout(this.lastTimeOsut);
  	this.lastTimeOut=setTimeout(function(){
  		
  		vm.fullname=vm.firstname+''+val;
  	},1000);
  },
 
 
  },
  	   
//	     methods:{
//	     	way(nval, oval){
//	     	alert('监听之前的'+nval+'监听之后的'+oval)	
//	     	},
//	     },
  	})
//vm.$watch('massge',function(nval, oval){
//	alert('监听之前的'+nval+'监听之后的'+oval)
//	
//})
  </script>
	</body>
</html>
